<template>
  <div class="media-list">
    <el-table
      :data="mediaFiles"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="文件信息" min-width="280">
        <template #default="{ row }">
          <div class="file-info">
            <!-- 图片类型 -->
            <template v-if="row.type === 'image'">
              <div class="thumbnail" @click.stop="handleImagePreview(row)">
                <el-image
                  :src="row.url"
                  fit="cover"
                  :preview-src-list="[row.url]"
                  :initial-index="0"
                  :preview-teleported="true"
                >
                  <template #error>
                    <div class="error-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </template>
            <!-- 文档类型 -->
            <template v-else>
              <div class="file-icon" :class="getFileTypeClass(row)" @click.stop="handleItemClick(row)">
                <div class="icon-container">
                  <el-icon><component :is="getDocumentIcon(row)" /></el-icon>
                  <span class="ext">{{ getFileExtension(row.name).toUpperCase() }}</span>
                </div>
              </div>
            </template>
            <div class="info">
              <div class="name" :title="row.name">{{ row.name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="120">
        <template #default="{ row }">
          <div class="type-display">
            <el-icon>
              <component :is="getTypeIcon(row)" />
            </el-icon>
            <span>
              {{ row.type === 'image' ? '图片' : 
                 row.type === 'document' ? '文档' : '其他' }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小" width="100" align="center" />
      <el-table-column label="修改时间" width="180" align="center">
        <template #default="{ row }">
          {{ formatTime(row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column width="120" align="right">
        <template #default="{ row }">
          <div class="operations">
            <el-button type="primary" text @click.stop="handleCopyLink(row)">
              <el-icon><Link /></el-icon>
            </el-button>
            <el-button type="danger" text @click.stop="handleDelete(row)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
/**
 * 媒体列表视图组件
 * 
 * 功能：
 * 1. 以表格形式展示媒体文件
 * 2. 支持选择文件进行批量操作
 * 3. 提供复制链接和删除单个文件的操作
 */
import { defineProps, defineEmits } from 'vue'
import { Picture, Document, Link, Delete, Files, Headset, VideoPlay, Terminal, Brush } from '@element-plus/icons-vue'
import { getFileExtension, getFileTypeClass, formatTime } from '@/utils/mediaUtils'

/**
 * 媒体文件类型定义
 */
interface MediaFile {
  id: number
  name: string
  type: 'image' | 'document'
  url: string
  size: string
  updateTime: string
  groupId: number
}

/**
 * 组件属性
 */
const props = defineProps<{
  /** 要展示的媒体文件列表 */
  mediaFiles: MediaFile[]
}>()

/**
 * 组件事件
 */
const emit = defineEmits<{
  /** 选择变更事件 */
  (e: 'selectionChange', selection: MediaFile[]): void
  /** 复制链接事件 */
  (e: 'copyLink', item: MediaFile): void
  /** 删除文件事件 */
  (e: 'delete', item: MediaFile): void
  /** 图片预览事件 */
  (e: 'preview', item: MediaFile): void
  /** 项目点击事件 */
  (e: 'itemClick', item: MediaFile): void
}>()

/**
 * 表格选择变更事件处理
 */
const handleSelectionChange = (selection: MediaFile[]) => {
  emit('selectionChange', selection)
}

/**
 * 处理复制链接事件
 */
const handleCopyLink = (item: MediaFile) => {
  emit('copyLink', item)
}

/**
 * 处理删除事件
 */
const handleDelete = (item: MediaFile) => {
  emit('delete', item)
}

/**
 * 处理图片预览事件
 */
const handleImagePreview = (item: MediaFile) => {
  if (item.type === 'image') {
    emit('preview', item)
  }
}

/**
 * 自定义文件类型图标
 */
const getTypeIcon = (item) => {
  if (item.type === 'image') return Picture
  if (item.type === 'document') return Document
  return Document
}

/**
 * 获取文档类型对应的图标
 */
const getDocumentIcon = (item) => {
  const ext = getFileExtension(item.name);
  
  // 文档类型
  if (['doc', 'docx', 'rtf', 'odt', 'pages'].includes(ext)) return 'Document';
  
  // PDF类型
  if (['pdf'].includes(ext)) return 'Document';
  
  // 文本类型
  if (['txt', 'md', 'json', 'log', 'xml', 'html', 'css', 'js', 'ts'].includes(ext)) return 'Document';
  
  // Excel类型
  if (['xls', 'xlsx', 'csv', 'numbers', 'ods'].includes(ext)) return 'Document';
  
  // PowerPoint类型
  if (['ppt', 'pptx', 'key', 'odp'].includes(ext)) return 'Document';
  
  // 压缩文件类型
  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) return 'Files';
  
  // 音频类型
  if (['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac'].includes(ext)) return 'Headset';
  
  // 视频类型
  if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext)) return 'VideoPlay';
  
  // 代码类型
  if (['java', 'py', 'cpp', 'c', 'cs', 'php', 'rb', 'go', 'swift'].includes(ext)) return 'Terminal';
  
  // 设计文件类型
  if (['psd', 'ai', 'sketch', 'fig', 'xd'].includes(ext)) return 'Brush';
  
  return 'Document';
}

/**
 * 处理项目点击事件
 */
const handleItemClick = (item: MediaFile) => {
  if (item.type === 'document') {
    emit('preview', item)
  }
}
</script>

<style lang="scss" scoped>
// 导入主题变量和混合器
@use '@/assets/styles/theme/base.scss' as *;
@use '@/assets/styles/mixins.scss' as *;

/**
 * 列表视图样式
 */
.media-list {
  padding: 0;
  height: 100%;
  background: var(--el-bg-color-overlay);
  border-radius: $radius-medium;

  :deep(.el-table) {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-header-bg-color: var(--el-bg-color-overlay);
    --el-table-row-hover-bg-color: #{$bg-light};
    height: 100%;

    &::before {
      display: none;
    }

    .el-table__header {
      th {
        padding: 12px;
        font-size: $font-size-small;
        font-weight: 500;
        color: $text-primary;
        background: var(--el-bg-color-overlay);
        border-bottom: 1px solid var(--el-border-color-lighter);

        &.is-leaf {
          border-bottom: 1px solid var(--el-border-color-lighter);
        }
      }
    }

    .el-table__body {
      td {
        padding: 12px;
        border-bottom: 1px solid var(--el-border-color-lighter);
      }

      tr:last-child td {
        border-bottom: none;
      }

      tr:hover {
        > td.el-table__cell {
          background-color: var(--el-fill-color-light);
        }
      }
    }

    /**
     * 文件信息单元格
     */
    .file-info {
      display: flex;
      align-items: center;
      gap: 12px;

      /**
       * 缩略图
       */
      .thumbnail {
        width: 40px;
        height: 40px;
        border-radius: $radius-medium;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        
        &:hover {
          transform: scale(1.05);
        }

        .el-image {
          width: 100%;
          height: 100%;
        }

        .error-placeholder {
          width: 100%;
          height: 100%;
          @include flex-center;
          background: $bg-light;
          color: $text-secondary;
          font-size: 20px;
        }
      }

      /**
       * 文件图标
       */
      .file-icon {
        width: 40px;
        height: 40px;
        border-radius: $radius-medium;
        overflow: hidden;
        position: relative;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.2s;
        
        &:hover {
          transform: scale(1.05);
        }
        
        .icon-container {
          width: 100%;
          height: 100%;
          @include flex-center;
          flex-direction: column;
          position: relative;
          z-index: 1;
          gap: 2px;
          
          &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 0;
            border-color: transparent rgba(255, 255, 255, 0.3) transparent transparent;
            z-index: 2;
          }
        }

        .el-icon {
          font-size: 18px;
          color: white;
          margin-bottom: 0;
          filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
        }

        .ext {
          font-size: 10px;
          color: white;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
          text-transform: lowercase;
        }

        &.file-type-doc {
          @include gradient-bg(#4285f4, #70a3f7);
        }

        &.file-type-docx {
          @include gradient-bg(#4285f4, #70a3f7);
        }

        &.file-type-pdf {
          @include gradient-bg(#ff5252, #ff8585);
        }

        &.file-type-txt {
          @include gradient-bg(#34a853, #68c883);
        }
        
        &.file-type-json {
          @include gradient-bg(#4CAF50, #81C784);
        }

        &.file-type-xls, &.file-type-xlsx {
          @include gradient-bg(#0F9D58, #63D08F);
        }
        
        &.file-type-ppt, &.file-type-pptx {
          @include gradient-bg(#DB4437, #F8866D);
        }
        
        &.file-type-zip {
          @include gradient-bg(#795548, #A67C52);
        }
        
        &.file-type-audio {
          @include gradient-bg(#9C27B0, #CE93D8);
        }
        
        &.file-type-video {
          @include gradient-bg(#FF9800, #FFCC80);
        }
        
        &.file-type-code {
          @include gradient-bg(#3F51B5, #7986CB);
        }
        
        &.file-type-design {
          @include gradient-bg(#E91E63, #F48FB1);
        }
        
        &.file-type-other {
          @include gradient-bg(#607D8B, #90A4AE);
        }
        
        &.file-type-image {
          @include gradient-bg(#00BCD4, #80DEEA);
        }
      }

      /**
       * 文件信息
       */
      .info {
        .name {
          font-size: $font-size-small;
          font-weight: 500;
          color: $text-primary;
          margin-bottom: 2px;
        }
      }
    }

    /**
     * 操作按钮
     */
    .operations {
      display: flex;
      gap: 8px;
      opacity: 0;
      @include transition(all);

      .el-button {
        padding: 8px;

        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    tr:hover {
      .operations {
        opacity: 1;
      }
    }
  }
}

.type-display {
  display: flex;
  align-items: center;
  gap: 6px;
  
  .el-icon {
    font-size: 16px;
    color: $text-regular;
  }
  
  span {
    color: $text-regular;
  }
}

.file-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .file-type-content {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon {
      font-size: 24px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
    }

    .ext {
      display: inline-block;
      padding: 2px 6px;
      border-radius: $radius-base;
      background: rgba(255, 255, 255, 0.9);
      font-size: $font-size-small;
      font-weight: 500;
      text-transform: lowercase;
      line-height: 1;
    }
  }
}
</style> 